<template>
  <div class="m-layout">
    <div class="m-layout__prepend">
      <div class="myhead">
        <van-uploader v-model="fileList" :deletable="false" class="aa"/>
        <div class="avthors">
              <img  :src="avator"/>
            </div>
        <div class="_1C1NAUsai1Ne">
          <div class="_1hLSB3J_AFSm m-ellipsis">
            <span>CD2224212725</span>
          </div>
        </div>
        <div class="_1TrH3jN8tING m-hairline--surround">个人会员</div>
      </div>
    </div>
    <div class="m-row _2SEsBVEyXpnu add">
      <div class="m-col m-col--6 _1XItuszQga2n">
        <div class="KL3_nTI2qbcR">0</div>
        <div class="lY8R_X-oisKV">收藏夹</div>
      </div>
      <div class="m-col m-col--6 _1XItuszQga2n">
        <div class="KL3_nTI2qbcR">0</div>
        <div class="lY8R_X-oisKV">关注店铺</div>
      </div>
      <div class="m-col m-col--6 _1XItuszQga2n">
        <div class="KL3_nTI2qbcR">0</div>
        <div class="lY8R_X-oisKV">足迹</div>
      </div>
      <div class="m-col m-col--6 _1XItuszQga2n">
        <div class="KL3_nTI2qbcR">0</div>
        <div class="lY8R_X-oisKV">积分</div>
      </div>
    </div>
    <div class="_32ORvfYSQT6s _1rcIpB6bv26-">
      <div class="m-row ass">
        <div class="m-col m-col--12 _2nT1-8GgCJdi">
          <div class="_1EFqdxx5Msb1">
            <div class="m-image m-image--block m-image--cover">
              <img src="../assets/img/img01.png" class="m-image__img" />
            </div>
          </div>
        </div>
        <div class="_3XriZEjdO74c">
          <div class="my__activity-label">玩转积分</div>
          <div class="zPsKp-0Fl_SP">积分商城兑换</div>
        </div>
        <div class="m-col m-col--12 _2nT1-8GgCJdi">
          <div class="_1EFqdxx5Msb1">
            <div class="m-image m-image--block m-image--cover">
              <img src="../assets/img/img02.png" class="m-image__img" />
            </div>
          </div>
        </div>
        <div class="_3XriZEjdO74c1">
          <div class="my__activity-label">每日红包</div>
          <div class="zPsKp-0Fl_SP">立即领取现金</div>
        </div>
      </div>
    </div>
    <div class="myprice">
      <div class="price">
        <div class="price_title">
          <span>我的订单</span>
        </div>
        <div class="all_title">
          <span
            >查看全部订单
            <van-icon name="arrow" />
          </span>
        </div>
      </div>
      <van-grid :column-num="5" class="my-grid" :border="false">
        <van-grid-item icon="https://m.chadian.com/img/order-1.bf2eb071.png" text="待付款" />
        <van-grid-item icon="https://m.chadian.com/img/order-2.2fc4e077.png" text="待发货" />
        <van-grid-item icon="https://m.chadian.com/img/order-3.cd6c0f60.png" text="待收货" />
        <van-grid-item icon="https://m.chadian.com/img/order-4.9b0a7260.png" text="待评价" />
        <van-grid-item icon="https://m.chadian.com/img/order-5.b9940d60.png" text="退款/售后" />
      </van-grid>
    </div>
    <div class="myprice">
      <div class="price">
        <div class="price_title">
          <span>我的工具箱</span>
        </div>
      </div>
      <van-grid :column-num="4" class="my-grid" :border="false">
        <van-grid-item icon="https://m.chadian.com/img/tool-1.2acbd952.png" text="我的收藏" />
        <van-grid-item icon="https://m.chadian.com/img/tool-2.7993f577.png" text="收货地址"  @click="hanaddress"/>
        <van-grid-item icon="https://m.chadian.com/img/tool-3.f1aabd52.png" text="我的评价" />
        <van-grid-item icon="https://m.chadian.com/img/tool-4.22dcbe6d.png" text="个人资料"  @click="handlepersonal"/>
        <van-grid-item icon="https://m.chadian.com/img/tool-5.bf1cbca0.png" text="账号安全" />
        <van-grid-item icon="https://m.chadian.com/img/tool-6.9365aee6.png" text="优惠券" />
        <van-grid-item icon="https://m.chadian.com/img/tool-7.3f2f8f6a.png" text="红包记录" />
       
      </van-grid>
    </div>
    <div class="myprice">
      <div class="price">
        <div class="price_title">
          <img src="https://chadian-img.oss-cn-shanghai.aliyuncs.com/temai%402x.png" class="lastimg"/>
          <span class="mys">严选精品</span>
          <van-tag type="danger">推荐</van-tag>
        </div>
        <div class="all_title">
          <span class="value"
            >挑选巨惠好茶
            <van-icon name="arrow" />
          </span>
        </div>
      </div>
      <div class="m-row m-row--flex m-row--justify-space-around _3g_uwEr93f1c fgh">
        <div class="m-col m-col--10">
          <div class="my__combine-item">
            <div class="_3Vh55amIB0vq fg">
              <div class="m-images m-image--block">
                <img src="https://chadian-img.oss-cn-shanghai.aliyuncs.com/product/i15836879880003095.jpeg?x-oss-process=image/resize,m_fill,w_300,h_300"/>
              </div>
              <div class="_2bbmPijepmvA" style="color: rgb(252, 66, 69);">好茶 万人疯抢</div>
            </div>
          </div>
        </div>
        <div class="m-col m-col--12">
          <div class="m-row">
            <div class="m-col m-col--12">
              <div class="my__combine-item">
                <div class="_3Vh55amIB0vq ffg">
                  <div class="m-image m-image--block xfsf">
                    <img src="https://chadian-img.oss-cn-shanghai.aliyuncs.com/product/a16142340448229625.jpeg?x-oss-process=image/resize,m_fill,w_300,h_300"/>
                  </div>
                  <div class="m-image m-image--block xfsf">
                    <img src="https://chadian-img.oss-cn-shanghai.aliyuncs.com/Product/4daca964055f411b967f22117a639854.jpg?x-oss-process=image/resize,m_fill,w_300,h_300"/>
                  </div>
                </div>
              </div>
            </div>
          </div>

        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {getList} from "../api/dl-api"
import {mapState} from "vuex"
export default {
  data() {
    return {
      fileList: [{ url: "" }],
    };
    imgsrc:''
  },
  created () {
    // let userid=305975
    // getList(userid).then(res=>{
    //   console.log(res);
    // })  
    
  },
  methods: {
    hanaddress() {
      this.$router.push('/address')
    },
    handlepersonal(){
      this.$router.push('/personal')
    }
  },
  computed: {
    ...mapState({
     avator:state=>{
       let url="https://img01.yzcdn.cn/vant/leaf.jpg"
       let {userInfo}=state.ddk
       if(userInfo&&userInfo.avator){
         url='http://localhost:3003'+userInfo.avator
       }
       return url
     }
    })
    
  },
};
</script>

<style lang="less" scoped>
.m-layout {
  height: 100%;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  flex-direction: column;
}
.m-layout__prepend {
  width: 100%;
}
/deep/.van-uploader__upload {
  display: none;
}
/deep/.van-image__img {
  border-radius: 50%;
  width: 60px;
  height: 60px;
}
.myhead {
  margin-top: 20px;
  margin-left: 15px;
}
._1C1NAUsai1Ne {
  -webkit-box-flex: 1;
  -webkit-flex: 1;
  flex: 1;
  width: 0;
  color: #323232;
  margin-left: 0.26667rem;
  position: absolute;
  top: 27px;
  left: 80px;
}
._1hLSB3J_AFSm {
  font-size: 16px;
  font-weight: 500;
  line-height: 0.64rem;
  max-width: 4.8rem;
  margin-bottom: 0.08rem;
}
.van-uploader {
  position: relative;
}
._1TrH3jN8tING {
  color: #969799;
  font-size: 0.26667rem;
  line-height: 0.48rem;
  padding: 0 0.21333rem;
  margin-top: -60px;
  margin-left: 71px;
  border: 1px solid #969799;
  width: 64px;
  padding: 5px 0;
  text-align: center;
  border-radius: 10px;
}
._1XItuszQga2n {
  color: #323232;
  text-align: center;
}
.KL3_nTI2qbcR {
  font-size: 0.37333rem;
  font-weight: 500;
  line-height: 0.53333rem;
}
.lY8R_X-oisKV {
  color: #969799;
  font-size: 0.32rem;
  line-height: 0.42667rem;
  margin-top: 10px;
}
/deep/.add {
  display: flex;
  justify-content: space-between;
  margin: 30px 30px;
}
.m-image__img {
  width: 36px;
  height: 36px;
  margin-left: 35px;
}
._1EFqdxx5Msb1 {
  line-height: 0;
  overflow: hidden;
}
.m-image--cover {
  position: relative;
  width: 100%;
  overflow: hidden;
}
._3XriZEjdO74c {
  margin-left: 0.13333rem;
  color: #323232;
  font-size: 0.32rem;
  font-weight: 500;
  line-height: 0.48rem;
  position: absolute;
  top: 17px;
  left: 71px;
}
._3XriZEjdO74c1 {
  margin-left: 11.13333rem;
  color: #323232;
  font-size: 0.32rem;
  font-weight: 500;
  line-height: 0.48rem;
  position: absolute;
  top: 17px;
  left: 71px;
}
._32ORvfYSQT6s {
  margin: 0 0.26667rem 0.26667rem;
  border-radius: 0.21333rem;
  background-color: #fff;
  overflow: hidden;
  position: relative;
  margin-top: -18px;
}
.zPsKp-0Fl_SP {
  color: #ee0a24;
  padding-top: 10px;
}
._2nT1-8GgCJdi {
  position: relative;
  width: 176px;
  float: left;
  padding: 10px 0;
}
._2nT1-8GgCJdi:first-child:after {
  content: " ";
  position: absolute;
  pointer-events: none;
  box-sizing: border-box;
  right: -2px;
  top: -21px;
  bottom: 0;
  border-right: 1px solid #fff;
  -webkit-transform: scaleX(0.5);
  transform: scaleX(0.5);
  z-index: 100;
  margin-top: -20px;
}
.myprice {
  margin: 0 0.26667rem 0.26667rem;
  border-radius: 0.21333rem;
  background-color: #fff;
  overflow: hidden;
  position: relative;
  margin-top: 5px;
}
.price {
  display: flex;
  justify-content: space-between;
  color: #323233;
  font-size: 14px;
  margin: 10px 20px;
}
.m-layout {
  background-color: #f4f4f4;
}
.price:after {
  position: absolute;
  width: 88%;
  content: " ";
  pointer-events: none;
  top: 46px;
  border-bottom: 1px solid #969799;
  -webkit-transform: scaleY(0.5);
  transform: scaleY(0.5);
}
.my-grid{
  margin-top: 25px;
}
.lastimg{
  width: 16px;
  height: 16px;
  display: inline-block;
  position: absolute;
  top: 1px;
  left: 0;
}
.price_title{
  position: relative;
}
.price_title>.mys{
margin-left: 20px;
}
.van-tag{
  margin-left: 5px;
}
.value{
color: #969799;

}

.m-col {
    float: left;
    box-sizing: border-box;
    min-height: 1px;
}
.fg>div:nth-of-type(1){
      height:150px;
    border-radius: .10667rem;
    overflow: hidden;
}
.m-images>img {
    display: block;
    width: 100%;
    height: 60%;
    margin-top: 15px;
    
    border-radius: 10px;
    
}
._3g_uwEr93f1c {
    padding:  0 20px;
}
.m-col--10 {
    width: 41.66666667%;
}
._2bbmPijepmvA {
    color: rgba(0,0,0,.65);
    font-size: .32rem;
    margin-top: -40px;
    text-align: center;
}
.my__combine-item{
  height: 200px;
}
.xfsf>img{
    display:inline-block;
    width: 83px;
    height: 83px;
    margin-top: 17px;
    border-radius: 10px;
}
.xfsf{
  margin-left: 20px;
  
}
.ffg{
display: flex;
}
.fgh{
  display: flex;
}
.avthors > img {
  position: absolute;
  top: 20px;
  left:16PX;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  opacity: 1;
}
.aa{
  opacity: 0;
  z-index: 1;
}
</style>